<!DOCTYPE HTML>
<html>

<head>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../themes/TreeMap.css";
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true">
	</script>

	<script type="text/javascript">

		require(["dojo/ready", "dojo/dom", "dojo/_base/declare", "dojox/treemap/TreeMap",
			"dojo/store/Memory", "dojox/color/MeanColorModel", "dojo/_base/Color", "dojox/treemap/Keyboard"],
			function(ready, dom, declare, TreeMap, Memory, MeanColorModel, Color, Keyboard) {
				ready(function(){
					var dataStore = new Memory({idProperty: "label", data:
							[
								{ label: "France", sales: 500, profit: 50, region: "EU" },
								{ label: "Germany", sales: 450, profit: 48, region: "EU" },
								{ label: "UK", sales: 700, profit: 60, region: "EU" },
								{ label: "USA", sales: 2000, profit: 250, region: "America" },
								{ label: "Canada", sales: 600, profit: 30, region: "America" },
								{ label: "Brazil", sales: 450, profit: 30, region: "America" },
								{ label: "China", sales: 500, profit: 40, region: "Asia" },
								{ label: "Japan", sales: 900, profit: 100, region: "Asia" }
							]
					});
					var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
					new declare([TreeMap, Keyboard])({store: dataStore,
								areaAttr: "sales", colorAttr: "profit", tooltipAttr: "label", groupAttrs: ["region"],
								colorModel: colorModel }, dom.byId("treeMap"));
				});
			}
		);
	</script>
</head>
<body>
	<div id="treeMap" style="width:640px;height:640px"></div>
</body>
</html>
